<script setup>
/*
watch:侦听数据（响应式的数据）变化后执行一个事件
   vue2:
      deep
      immediate
   用法：
     1：导入 import {watch} from 'vue'
     2:定义侦听
       基本用法
          const stop=watch(需要侦听的数据,(newVal,oldVal)=>{},{deep,immediate})
          stop:停止侦听的方法 
       watch可同时侦听多个数据
          const stop=watch([需要侦听的数据a,需要侦听的数据b...],(newVal,oldVal)=>{},{deep,immediate})
       watch侦听一个响应式数据下的某个属性
          const user=ref({
            name:'张三',
            age:18
          })
          const stop=watch(()=>user.value.age,(newVal,oldVal)=>{},{deep,immediate})
        补充：watch配制项
            deep:是否深度侦听
            immediate:是否立马执行回调函数
            flush:针对什么时候执行回调函数
               pre:默认值,渲染前执行回调函数
               post:渲染后执行回调函数
               sync:修改一次执行一次回调（渲染前）


*/
import { ref, watch } from 'vue'
const num = ref(0)
const stop = watch(
  num,
  (newVal, oldVal) => {
    // newVal:当前值，oldVal:修改前的值
    console.log(newVal, oldVal)
    if (newVal > 5) {
      console.log('num大于5了')
    }
  },
  {
    immediate: true
  }
)
// 同时侦听多个值
const str = ref('abc')
const stop2 = watch([str, num], (newVal, oldVal) => {
  console.log(newVal, oldVal, '多个数据的侦听')
})

// 侦听响应式数据下的某个属性
const user = ref({
  name: '张三',
  age: 18
})
const stop3 = watch(
  () => user.value.age,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  }
)

// flush配制项  pre post sync
const count = ref(999)
const add = () => {
  count.value++
  count.value++
  count.value++
}
const stop4 = watch(
  count,
  (newVal, oldVal) => {
    console.log(document.querySelector('#h3').innerHTML)
  },
  {
    flush: 'sync'
  }
)
</script>

<template>
  <div>
    <h3>{{ num }}</h3>
    <button @click="num++">点击num++</button>
    <button @click="num++">点击num++</button>
    <button @click="num++">点击num++</button>
    <button @click="stop">停止侦听</button>
    <h3>{{ str }}</h3>
    <button @click="str = Date.now()">修改str</button>
    <button @click="stop2">停止侦听</button>
    <hr />
    <h3>{{ user.age }}</h3>
    <button @click="user.age++">修改age</button>
    <hr />
    <h3 id="h3">{{ count }}</h3>
    <button @click="add">点击++</button>
  </div>
</template>
